<html>
  <head>
    <title>UBSpatial Visualisation Demonstrator</title>
    <link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" />
	
	<!-- Basic CSS definitions -->
	<style type="text/css">
		/* General settings */
		body {
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			font-size: small;
		}
		/* Toolbar styles */
		#toolbar {
			position: relative;
			padding-bottom: 0.5em;
			display: none;
		}
		
		#toolbar ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		
		#toolbar ul li {
			float: left;
			padding-right: 1em;
			padding-bottom: 0.5em;
		}
		
		#toolbar ul li a {
			font-weight: bold;
			font-size: smaller;
			vertical-align: middle;
			color: black;
			text-decoration: none;
		}

		#toolbar ul li a:hover {
			text-decoration: underline;
		}
		
		#toolbar ul li * {
			vertical-align: middle;
		}

		/* The map and the location bar */
		#map {
			clear: both;
			position: relative;
			width: 512px;
			height: 441px;
			border: 1px solid black;
		}
		
		#wrapper {
			width: 512px;
		}
		
		#location {
			float: right;
		}
		
		#options {
			position: absolute;
			left: 13px;
			top: 7px;
			z-index: 3000;
		}

		/* Styles used by the default GetFeatureInfo output, added to make IE happy */
		table.featureInfo, table.featureInfo td, table.featureInfo th {
			border: 1px solid #ddd;
			border-collapse: collapse;
			margin: 0;
			padding: 0;
			font-size: 90%;
			padding: .2em .1em;
		}
		
		table.featureInfo th {
			padding: .2em .2em;
			text-transform: uppercase;
			font-weight: bold;
			background: #eee;
		}
		
		table.featureInfo td {
			background: #fff;
		}
		
		table.featureInfo tr.odd td {
			background: #eee;
		}
		
		table.featureInfo caption {
			text-align: left;
			font-size: 100%;
			font-weight: bold;
			text-transform: uppercase;
			padding: .2em .2em;
		}
	</style>
	
	<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
	<!--
    <script src="http://geoserver.geodatawiz.com/openlayers/OpenLayers.js"></script>
	-->

	<script defer="defer" type="text/javascript">
		//OpenLayers.ProxyHost = '/cgi-bin/proxy.cgi?url=';

		var map;
		var pureCoverage = false;
		// pink tile avoidance
		OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
		// make OL compute scale according to WMS spec
		OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
		var mapSrsName = 'EPSG:900913';   // map is in spherical mercator = Google
		var displaySrsName = 'EPSG:4326'; // display of coordinates is in WGS84 lat/lon
		var mapProjection = new OpenLayers.Projection(mapSrsName);
		var displayProjection = new OpenLayers.Projection(displaySrsName); 
		
		var urls = {
			wms : {
				bores: 'http://maps.ubspatial.com.au/groundwater/wms?service=WMS'
			},
			wfs : {
				ffsr:  'http://siss.versi.edu.au/geoserver/wfs?service=WFS',
				ubs:   'http://maps.ubspatial.com.au:8000/geoserver/wfs?service=WFS',
				//loc:	   'http://localhost:8080/geoserver/wfs?service=WFS'
				loc:	   'http://localhost:8080/geoserver/wfs'
			}
		};
		var layers = {
			wms : {},
			wfs : {
				ffsr: {},
				ubs: {}
			}
		};
		var wfs = {};
	
		function init(){
			// if this is just a coverage or a group of them, disable a few items,
			// and default to jpeg format
			format = 'image/png';
			if(pureCoverage) {
				document.getElementById('filterType').disabled = true;
				document.getElementById('filter').disabled = true;
				document.getElementById('antialiasSelector').disabled = true;
				document.getElementById('updateFilterButton').disabled = true;
				document.getElementById('resetFilterButton').disabled = true;
				document.getElementById('jpeg').selected = true;
				format = "image/jpeg";
			}
			var bounds = new OpenLayers.Bounds(
				141.0, -39.0,
				150.1, -34.0
			);
			bounds = bounds.transform(displayProjection, mapProjection);
			
			var mapOptions = {
				projection: mapProjection,
				displayProjection: displayProjection,
				units: "m",
				maxResolution: 156543.0339,
				maxExtent: bounds,
				//maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34),
				//numZoomLevels: 10,
				//maxZoomLevel: 18,
				//minZoomLevel: 8,
				controls: [],
			};
			map = new OpenLayers.Map('map', mapOptions);

			//Add Google layer.
			layers.gmap = new OpenLayers.Layer.Google(
				"Google Streets", // the default
				{numZoomLevels: 20}
			);
			
			//Add groundwater bores layer.
			layers.wms.bores = new OpenLayers.Layer.WMS( 
				"Bores", 
				urls.wms.bores, 
				{
					layers: 'groundwater_bores,other_bores', 
					transparent: true
				}
			);
			layers.wms.bores.addOptions({
				isBaseLayer: false, 
				singleTile: true, 
				opacity: 0.6
			});
			layers.wms.bores.setVisibility(true);
			
			//xmlns:gsml="urn:cgi:xmlns:CGI:GeoSciML:2.0"
			//xmlns:gwml="http://www.nrcan.gc.ca/xml/gwml/1"
			
			//Add VeRSI SISS FFSR WFS layers.
			layers.wfs.ffsr.borehole = new OpenLayers.Layer.Vector("FFSR WFS", {
				strategies: [new OpenLayers.Strategy.BBOX()],
				protocol: new OpenLayers.Protocol.WFS({
					url: urls.wfs.ffsr,
					featureType: 'Borehole',
					//geometryName: 'collarLocation',
					//geometryName: 'BoreholeCollar',
					//geometryName: 'location',
					//geometryName: 'Point',
					//featureNS: "http://www.openplans.org/topp",
					extractAttributes : true,
					maxFeatures: 1000,
					srsName: mapSrsName,
					//srsName: 'EPSG:4326',
					version: '1.1.0'
				})
			});        
			layers.wfs.ffsr.waterwell = new OpenLayers.Layer.Vector("FFSR WFS", {
				strategies: [new OpenLayers.Strategy.BBOX()],
				protocol: new OpenLayers.Protocol.WFS({
					url: urls.wfs.ffsr,
					featureType: 'WaterWell',
					//geometryName: 'sa:position',
					featurePrefix: 'gwml',
					featureNS: "http://www.nrcan.gc.ca/xml/gwml/1",
					extractAttributes : true,
					maxFeatures: 10,
					srsName: mapSrsName,
					//srsName: 'EPSG:4326',
					version: '1.1.0'
				})
			});        

			//Add UBSpatial SISS WFS layers.
			layers.wfs.ubs.borehole = new OpenLayers.Layer.Vector("UBS WFS", {
				strategies: [new OpenLayers.Strategy.BBOX()],
				protocol: new OpenLayers.Protocol.WFS({
					url: urls.wfs.ubs,
					featureType: 'Borehole',
					//geometryName: 'collarLocation',
					//geometryName: 'BoreholeCollar',
					//geometryName: 'location',
					//geometryName: 'Point',
					//featureNS: "http://www.openplans.org/topp",
					extractAttributes : true,
					maxFeatures: 100,
					srsName: mapSrsName,
					//srsName: 'EPSG:4326',
					version: '1.1.0'
				})
			});        
			layers.wfs.ubs.waterwell = new OpenLayers.Layer.Vector("UBS WFS", {
				strategies: [new OpenLayers.Strategy.BBOX()],
				protocol: new OpenLayers.Protocol.WFS({
					url: urls.wfs.ubs,
					featureType: 'WaterWell',
					//geometryName: 'collarLocation',
					//geometryName: 'BoreholeCollar',
					//geometryName: 'location',
					//geometryName: 'Point',
					//featureNS: "http://www.openplans.org/topp",
					extractAttributes : true,
					maxFeatures: 10,
					srsName: mapSrsName,
					//srsName: 'EPSG:4326',
					version: '1.1.0'
				})
			});        

			// Add layers to map
			map.addLayer(layers.gmap);
			//map.addLayer(layers.wms.bores);
			//wfs = layers.wfs.ffsr.borehole;
			wfs = layers.wfs.ffsr.waterwell;
			//wfs = layers.wfs.ubs.borehole;
			//wfs = layers.wfs.ubs.waterwell;
			//map.addLayer(wfs);

			// build up all controls            
			map.addControl(new OpenLayers.Control.PanZoomBar({
				position: new OpenLayers.Pixel(2, 15)
			}));
			map.addControl(new OpenLayers.Control.Navigation());
			map.addControl(new OpenLayers.Control.Scale($('scale')));
			map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
			map.zoomToExtent(bounds);
			
			// wire up the option button
			var options = document.getElementById("options");
			//options.onclick = toggleControlPanel;
			
			// support GetFeatureInfo
/*			
			map.events.register('click', map, function (e) {
				document.getElementById('nodelist').innerHTML = "Loading... please wait...";
				var params = {
					REQUEST: "GetFeatureInfo",
					EXCEPTIONS: "application/vnd.ogc.se_xml",
					BBOX: map.getExtent().toBBOX(),
					X: e.xy.x,
					Y: e.xy.y,
					INFO_FORMAT: 'text/html',
					QUERY_LAYERS: map.layers[0].params.LAYERS,
					FEATURE_COUNT: 50,
					Layers: 'medford',
					Styles: '',
					Srs: 'EPSG:4326',
					WIDTH: map.size.w,
					HEIGHT: map.size.h,
					format: format};
				OpenLayers.loadURL("http://localhost:8080/geoserver/wms", params, this, setHTML, setHTML);
				OpenLayers.Event.stop(e);
			});
*/			
		}
		
		// sets the HTML provided into the nodelist element
		function setHTML(response){
			document.getElementById('nodelist').innerHTML = response.responseText;
		};
		
		// shows/hide the control panel
		function toggleControlPanel(event){
			var toolbar = document.getElementById("toolbar");
			if (toolbar.style.display == "none") {
				toolbar.style.display = "block";
			}
			else {
				toolbar.style.display = "none";
			}
			event.stopPropagation();
			map.updateSize()
		}
		
		function setWidth(size){
			var mapDiv = document.getElementById('map');
			var wrapper = document.getElementById('wrapper');
			
			if (size == "auto") {
				// reset back to the default value
				mapDiv.style.width = null;
				wrapper.style.width = null;
			}
			else {
				mapDiv.style.width = size + "px";
				wrapper.style.width = size + "px";
			}
			// notify OL that we changed the size of the map div
			map.updateSize();
		}
		
		function setHeight(size){
			var mapDiv = document.getElementById('map');
			
			if (size == "auto") {
				// reset back to the default value
				mapDiv.style.height = null;
			}
			else {
				mapDiv.style.height = size + "px";
			}
			// notify OL that we changed the size of the map div
			map.updateSize();
		}
		
		function updateFilter(){
			if(pureCoverage)
			  return;
		
			var filterType = document.getElementById('filterType').value;
			var filter = document.getElementById('filter').value;
			
			// by default, reset all filters                
			var filterParams = {
				filter: null,
				cql_filter: null,
				featureId: null
			};
			if (OpenLayers.String.trim(filter) != "") {
				if (filterType == "cql") 
					filterParams["cql_filter"] = filter;
				if (filterType == "ogc") 
					filterParams["filter"] = filter;
				if (filterType == "fid") 
					filterParams["featureId"] = filter;
			}
			// merge the new filter definitions
			mergeNewParams(filterParams);
		}
		
		function resetFilter() {
			if(pureCoverage)
			  return;
		
			document.getElementById('filter').value = "";
			updateFilter();
		};
		
		function mergeNewParams(params){
			//tiled.mergeNewParams(params);
		};
		
		function showFeature(feature) {             
			var msg = "Geom: ";
			if (feature.geometry){
				msg += feature.geometry.toString();
			};
			msg += "\r\n";
			for (var key in feature.attributes){
				msg += key + ":" + feature.attributes[key] + "\r\n";
			};
			alert(msg);
		};
		function showAllFeatures(){
			alert('Features: '+wfs.features.length);
			for (var i in wfs.features){
				showFeature(wfs.features[i]);
			};
		};
		
		function getRaw(){
			document.getElementById('nodelist').innerHTML = "Loading... please wait...";
			var params = {
				request: "GetFeature",
				typeName: "gwml:WaterWell",
				maxFeatures: 50,
				srsName: mapSrsName,
				//outputFormat: 'json',
				//EXCEPTIONS: "application/vnd.ogc.se_xml",
				//BBOX: map.getExtent().toBBOX(),
				//X: e.xy.x,
				//Y: e.xy.y,
				//QUERY_LAYERS: map.layers[0].params.LAYERS,
				Version: '1.1.0'
			};
			// try wfslayer.getFullRequestString
			OpenLayers.loadURL(urls.wfs.ffsr, params, this, setHTML, setHTML);
		}
		function getBox(){
			//document.getElementById('nodelist').innerHTML = "Loading... please wait...";

			var bounds1 = new OpenLayers.Bounds(144.0882, -37.77, 145.2, -36.65);
			var bbox1_filter = new OpenLayers.Filter.Spatial({
				type: OpenLayers.Filter.Spatial.BBOX,
				value: bounds1,
				projection: displaySrsName
			});
			var bounds2 = new OpenLayers.Bounds(144.26, -37.23, 144.70, -36.93);
			var bbox2_filter = new OpenLayers.Filter.Spatial({
				type: OpenLayers.Filter.Spatial.BBOX,
				value: bounds2,
				projection: displaySrsName
			});
			var bounds2b = new OpenLayers.Bounds(144.26, -37.23, 144.70, -36.93);
			bounds2b.transform(displayProjection, mapProjection);
			var bbox2b_filter = new OpenLayers.Filter.Spatial({
				type: OpenLayers.Filter.Spatial.BBOX,
				value: bounds2b,
				projection: mapSrsName
			});

			var points = [];
			points.push(new OpenLayers.Geometry.Point(144.0882, -37.77));
			points.push(new OpenLayers.Geometry.Point(145.2, -36.65));
			var lineString = new OpenLayers.Geometry.LineString(points);
			lineString.transform(displayProjection, mapProjection);
			var dist_filter = new OpenLayers.Filter.Spatial({
				type: OpenLayers.Filter.Spatial.DWITHIN,
				distanceUnits: 'm',
				distance: 100000,
				projection: mapSrsName,
				value: lineString
			});

			//OpenLayers.ProxyHost = '';
			//delete OpenLayers.ProxyHost;
			var wfs_layer = new OpenLayers.Layer.Vector("FFSR WFS", {
				strategies: [
					//new OpenLayers.Strategy.Filter({filter: dist_filter}),
					//new OpenLayers.Strategy.Filter({filter: bbox2b_filter}),
					new OpenLayers.Strategy.BBOX()
				],
				protocol: new OpenLayers.Protocol.WFS({
					//url: urls.wfs.ffsr,
					//url: urls.wfs.ubs,
					//url: urls.wfs.loc,
					url: 'http://localhost:8080/geoserver/wfs?service=WFS',
					//featureType: 'Borehole',
					featureType: 'GMS_site_summary',
					//featureType: 'school_pt',
					extractAttributes : true,
					maxFeatures: 1000,
					srsName: mapSrsName,
					version: '1.1.0'
				})//,
				//filter: bbox1_filter
				//filter: dist_filter
			});
			map.addLayer(wfs_layer);
			//The following doesn't work as the load is asynchronous.
			//document.getElementById('nodelist').innerHTML = "Loaded "+wfs_layer.features.length;
		}
		</script>
  </head>

  <body onload="init()">
    <h1 id="title">UBSpatial Visualisation Demonstrator</h1>
    <div id="map" class="smallmap"></div>
    <div id="wrapper">
		<div id="location">location</div>
		<div id="scale">
		</div>
    </div>
	<input type=button value="Show" onClick="showAllFeatures()">
	<input type=button value="Raw" onClick="getRaw()">
	<input type=button value="Box" onClick="getBox()">
    <div id="nodelist">
        <em>Click on the map to get feature info</em>
    </div>
  </body>

</html>